<template>
	<view class="content">
		<view class="title">单选(带数据回显)：</view>
		<view class="myInput">
			<input v-model="ljs_tree1.departmentName" @click="ljs_tree1Open" class="input" type="text" placeholder="点击选择组织" disabled />
		</view>
		<ljs-treeChoose
			:show="ljs_tree1.departmentTag"
			v-model="ljs_tree1.department"
			:ids="ljs_tree1.chooseIds"
			:props="ljs_tree1.props"
			@getChooseValue="ljs_tree1GetChooseValue"
			@close="ljs_tree1CloseTree">
		</ljs-treeChoose>
			
		<view class="title">多选，返回最后一级路径：</view>
		<view class="myInput2">
			<view class="input" @click="ljs_tree2Open">
				<view class="one" v-for="(item, i) in ljs_tree2.chooseDatas" :key="i">
					<span v-for="(obj, j) in item" :key="j">{{obj.label}}{{j !== item.length - 1?'-':''}}</span>
				</view>
			</view>
		</view>
		<ljs-treeChoose
			:show="ljs_tree2.departmentTag"
			v-model="ljs_tree2.department"
			:ids="ljs_tree2.chooseIds"
			:multiple="ljs_tree2.multiple"
			:showAllLevels="ljs_tree2.showAllLevels"
			@getChooseValue="ljs_tree2GetChooseValue"
			@close="ljs_tree2CloseTree">
		</ljs-treeChoose>
			
		<view class="title">单选，任意级都可选：</view>
		<view class="myInput">
			<input v-model="ljs_tree3.departmentName" @click="ljs_tree3Open" class="input" type="text" placeholder="点击选择组织" disabled />
		</view>
		<ljs-treeChoose
			:show="ljs_tree3.departmentTag"
			v-model="ljs_tree3.department"
			:ids="ljs_tree3.chooseIds"
			:checkStrictly="ljs_tree3.checkStrictly"
			chooseMode="ico"
			@getChooseValue="ljs_tree3GetChooseValue"
			@close="ljs_tree3CloseTree">
		</ljs-treeChoose>
		<!-- <view @click="go()" class="but">nvue Dome</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ljs_tree1: {
					departmentTag: false,
					department: [],
					departmentName: "九山科技-深圳总公司-研发部门", // 用于接口回显展示数据
					chooseIds: [100, 101, 103], // 选择tree的id数据结果集合
					props: { label: 'name', id: 'value', children: 'children' },
				},
				ljs_tree2: {
					departmentTag: false,
					department: [],
					multiple: true, // 是否多选
					showAllLevels: false, // 是否返回完整路径数据集
					chooseIds: [], // 选择tree的id数据结果集合
					chooseDatas: [], // 数据集
				},
				ljs_tree3: {
					departmentTag: false,
					department: [],
					departmentName: "",
					checkStrictly: true, // 任意级都可选
					chooseIds: [], // 选择tree的id数据结果集合
				}
			}
		},
		onLoad() {
			// 原始数据
			this.ljs_tree1.department = this.ljs_tree1.department = [{"value":100,"name":"九山科技","type":null,"children":[{"value":101,"name":"深圳总公司","type":null,"children":[{"value":103,"name":"研发部门","disabled":true,"type":null,},{"value":104,"name":"市场部门","type":null,},{"value":105,"name":"测试部门","type":null,},{"value":106,"name":"财务部门","type":null,},{"value":107,"name":"运维部门","type":null,}],},{"value":102,"name":"长沙分公司","type":null,"children":[{"value":108,"name":"市场部门","type":null,},{"value":109,"name":"财务部门","type":null,}],},{"value":200,"name":"西安分公司","type":null,"children":[{"value":202,"name":"人事部","type":null,},{"value":201,"name":"研发部","type":null,}],}],}];;;
			// 原始数据
			this.ljs_tree2.department = [{"id":100,"label":"九山科技","disabled":false,"type":null,"children":[{"id":101,"label":"深圳总公司","disabled":false,"type":null,"children":[{"id":103,"label":"研发部门","disabled":false,"type":null},{"id":104,"label":"市场部门","disabled":false,"type":null},{"id":105,"label":"测试部门","disabled":false,"type":null},{"id":106,"label":"财务部门","disabled":false,"type":null},{"id":107,"label":"运维部门","disabled":false,"type":null}]},{"id":102,"label":"长沙分公司","disabled":false,"type":null,"children":[{"id":108,"label":"市场部门","disabled":false,"type":null},{"id":109,"label":"财务部门","disabled":false,"type":null}]},{"id":200,"label":"西安分公司","disabled":false,"type":null,"children":[{"id":202,"label":"人事部","disabled":false,"type":null},{"id":201,"label":"研发部","disabled":false,"type":null}]}]}];
			// 原始数据
			this.ljs_tree3.department = [{"id":100,"label":"九山科技","disabled":false,"type":null,"children":[{"id":101,"label":"深圳总公司","disabled":false,"type":null,"children":[{"id":103,"label":"研发部门","disabled":false,"type":null},{"id":104,"label":"市场部门","disabled":false,"type":null},{"id":105,"label":"测试部门","disabled":false,"type":null},{"id":106,"label":"财务部门","disabled":false,"type":null},{"id":107,"label":"运维部门","disabled":false,"type":null}]},{"id":102,"label":"长沙分公司","disabled":false,"type":null,"children":[{"id":108,"label":"市场部门","disabled":false,"type":null},{"id":109,"label":"财务部门","disabled":false,"type":null}]},{"id":200,"label":"西安分公司","disabled":false,"type":null,"children":[{"id":202,"label":"人事部","disabled":false,"type":null},{"id":201,"label":"研发部","disabled":false,"type":null}]}]}];
		},
		methods: {
			// 单选 - 打开
			ljs_tree1Open() {
				this.ljs_tree1.departmentTag = true;
			},
			// 单选 - 关闭
			ljs_tree1CloseTree(val){
				this.ljs_tree1.departmentTag = val;
			},
			// 单选 - 获取
			// ids: 集合
			// items: 节点对象集合
			ljs_tree1GetChooseValue(ids, items){
				console.log(ids, items)
				this.ljs_tree1.chooseIds = ids;
				
				this.ljs_tree1.departmentName = "";
				items.forEach((item, i)=>{
					this.ljs_tree1.departmentName += item[this.ljs_tree1.props.label] + "-";
				});
				this.ljs_tree1.departmentName = this.ljs_tree1.departmentName.substring(0, this.ljs_tree1.departmentName.length - 1);
			},
			
			// 多选 - 打开
			ljs_tree2Open() {
				this.ljs_tree2.departmentTag = true;
			},
			// 多选 - 关闭
			ljs_tree2CloseTree(val){
				this.ljs_tree2.departmentTag = val;
			},
			// 多选 - 获取
			// ids: 集合
			// items: 节点对象集合
			ljs_tree2GetChooseValue(ids, items){
				console.log(ids, items)
				this.ljs_tree2.chooseIds = ids;
				
				this.ljs_tree2.chooseDatas = items;
			},
			
			// 单选，任意级都可选 - 打开
			ljs_tree3Open() {
				this.ljs_tree3.departmentTag = true;
			},
			// 单选，任意级都可选 - 关闭
			ljs_tree3CloseTree(val){
				this.ljs_tree3.departmentTag = val;
			},
			// 单选，任意级都可选 - 获取
			// ids: 集合
			// items: 节点对象集合
			ljs_tree3GetChooseValue(ids, items){
				console.log(ids, items)
				this.ljs_tree3.chooseIds = ids;
				
				this.ljs_tree3.departmentName = "";
				items.forEach((item, i)=>{
					this.ljs_tree3.departmentName += item.label + "-";
				});
				this.ljs_tree3.departmentName = this.ljs_tree3.departmentName.substring(0, this.ljs_tree3.departmentName.length - 1);
			},
			go() {
				uni.navigateTo({
					url: '/pages/ljs-treeChoose/nvue'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		padding: 30upx 30upx 0 30upx;
	}
	.myInput{
		padding: 30upx;
		.input{
			width: 100%;
			height: 80upx;
			border: 2upx solid #ccc;
			border-radius: 10upx;
			font-size: 32upx;
			padding: 0 20upx;
			box-sizing: border-box;
		}
	}
	.myInput2{
		padding: 30upx;
		.input{
			width: 100%;
			min-height: 80upx;
			line-height: 50upx;
			padding: 24upx 20upx;
			border: 2upx solid #ccc;
			border-radius: 10upx;
			font-size: 32upx;
			box-sizing: border-box;
			overflow: hidden;
			.one{
				background-color: #eee;
				border-radius: 8upx;
				padding: 6upx 8upx;
				float: left;
				margin: 4upx;
			}
		}
	}
	.but{
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		background-color: #eee;
		color: #333;
	}
</style>
